<template>
  <div class="box">
    <div class="header">
      <!-- logo -->
      <div class="header-logo">
        <div class="left-img">
          <img src="../assets/logo-left.png" />
        </div>
        <div class="right-img" v-show="!isCollapse">
          <img src="../assets/logo-right.png" />
        </div>
      </div>
      <!-- 功能图标 -->
      <div class="header-right">
        <div class="function">
          <!-- 网络状态 -->
          <div class="net-state-icon">
            <img
              style="width: 30px; height: 30px"
              src="../assets/function1.png"
            />
            <img
              style="margin-bottom: 11.5px; width: 25px; height: 8px"
              src="../assets/function2.1.png"
            />
            <img
              style="width: 30px; height: 30px"
              src="../assets/function3.png"
            />
            <img
              style="margin-bottom: 11.5px; width: 25px; height: 8px"
              :src="
                this.onLine
                  ? require('../assets/function2.1.png')
                  : require('../assets/function2.2.png')
              "
            />
            <img
              style="width: 28px; height: 30px"
              src="../assets/function4.png"
            />
          </div>
          <!-- 组网 -->
          <div class="network-icon">
            <el-tooltip
              effect="dark"
              content="打开加网后默认会在30分钟后关闭"
              placement="top"
            >
              <div class="icon-area" @click="addNetwork()">
                <div
                  :class="
                    isOpenNetwork
                      ? 'network-icon rotate-animation'
                      : 'network-icon'
                  "
                >
                  <img class="rotate-img" style="" src="../assets/加网.png" />
                </div>
              </div>
            </el-tooltip>
          </div>
          <!-- 刷新数据 -->
          <div class="refresh">
            <el-tooltip
              effect="dark"
              content="刷新前请记得保存数据"
              placement="top"
            >
              <span @click="refresh()">
                <img
                  class="refresh-img"
                  style="margin-left: 10px; width: 28px; height: 28px"
                  src="../assets/刷新.png"
                />
              </span>
            </el-tooltip>
          </div>
        </div>
        <div
          style="
            width: 100%;
            line-height: 15px;
            position: fixed;
            top: 55px;
            background-color: #f6f9f9;
            color: #f6f9f9;
          "
        >
          .
        </div>
      </div>
    </div>
    <div class="tbody">
      <div class="left_menu" v-show="!isCollapse">
        <el-col :span="12">
          <el-menu
            class="el-menu-vertical-demo"
            @open="handleOpen"
            @close="handleClose"
            :collapse="isCollapse"
            router
            background-color="#212131"
            text-color="#fff"
            active-text-color="#fff"
            :collapse-transition="false"
            :unique-opened="true"
          >
            <el-menu-item index="spaceconfig">
              <i class="el-icon-film"></i>
              <span slot="title">智能空间</span>
            </el-menu-item>

            <el-submenu index="1">
              <template slot="title">
                <i class="el-icon-location"></i>
                <span>智能设备</span>
              </template>
              <el-menu-item-group>
                <!-- <el-menu-item index="spaceconfig">空间配置</el-menu-item> -->
                <el-menu-item index="ExecutionDevice">
                  <span slot="title" style="margin-left: 10px">执行设备</span>
                </el-menu-item>
                <el-menu-item index="GroupEdit">
                  <span slot="title" style="margin-left: 10px">群组管理</span>
                </el-menu-item>
                <el-menu-item index="SceneEdit">
                  <span slot="title" style="margin-left: 10px">场景设置</span>
                </el-menu-item>
                <el-menu-item index="InteractiveEdit">
                  <span slot="title" style="margin-left: 10px">交互设备</span>
                </el-menu-item>
                <el-menu-item index="AutomateConfig">
                  <span slot="title" style="margin-left: 10px"
                    >自动控制&nbsp;&nbsp;&nbsp;&nbsp;</span
                  >
                </el-menu-item>
              </el-menu-item-group>
            </el-submenu>

            <el-submenu index="2">
              <template slot="title">
                <i class="el-icon-menu"></i>
                <span>智能网关</span>
              </template>
              <el-menu-item-group>
                <!-- <el-menu-item index="spaceconfig">空间配置</el-menu-item> -->
                <el-menu-item index="NetworkConfiguration">
                  <span slot="title" style="margin-left: 10px">网络配置</span>
                </el-menu-item>
                <el-menu-item index="HostPattern">
                  <span slot="title" style="margin-left: 10px">主机模式</span>
                </el-menu-item>
              </el-menu-item-group>
            </el-submenu>

            <el-menu-item index="NetTopology">
              <i class="el-icon-printer"></i>
              <span slot="title">网络拓扑</span>
            </el-menu-item>
            <el-menu-item index="deviceInfo">
              <i class="el-icon-cloudy"></i>
              <span slot="title">云端服务</span>
            </el-menu-item>
            <el-menu-item index="HostMessage">
              <i class="el-icon-user-solid"></i>
              <span slot="title">用户信息</span>
            </el-menu-item>
          </el-menu>
          <!-- 折叠按钮 -->
          <div class="left_menu_button">
            <span
              :class="collapseBtnClass"
              style="cursor: pointer"
              @click="changMenu"
            ></span>
          </div>
        </el-col>
        <!-- 设备状态信息 -->
        <div class="left_menu_state">
          <span style="margin-left: 20px">设备数 {{ total_count }}</span>
          &nbsp;&nbsp;&nbsp;
          <span
            >离线
            <span style="color: red">{{ offline_count }}</span>
          </span>
        </div>
      </div>
      <div class="left_menu" v-show="isCollapse">
        <el-col :span="12">
          <el-menu
            class="el-menu-vertical-demo"
            @open="handleOpen"
            @close="handleClose"
            :collapse="isCollapse"
            router
            background-color="#212131"
            text-color="#fff"
            active-text-color="#fff"
            :collapse-transition="false"
          >
            <el-menu-item index="spaceconfig">
              <span slot="title">智能空间</span>
              <i class="el-icon-film"></i>
            </el-menu-item>
            <el-menu-item index="ExecutionDevice">
              <span slot="title">执行设备</span>
              <i class="el-icon-coordinate"></i>
            </el-menu-item>
            <el-menu-item index="GroupEdit">
              <span slot="title">群组管理</span>
              <i class="el-icon-reading"></i>
            </el-menu-item>
            <el-menu-item index="SceneEdit">
              <span slot="title">场景设置</span>
              <i class="el-icon-postcard"></i>
            </el-menu-item>
            <el-menu-item index="InteractiveEdit">
              <span slot="title">交互编辑</span>
              <i class="el-icon-table-lamp"></i>
            </el-menu-item>
            <el-menu-item index="AutomateConfig">
              <span slot="title">自动控制</span>
              <i class="el-icon-bank-card"></i>
            </el-menu-item>

            <el-menu-item index="NetworkConfiguration">
              <span slot="title">网络配置</span>
              <i class="el-icon-setting"></i>
            </el-menu-item>
            <el-menu-item index="HostPattern">
              <span slot="title">主机模式</span>
              <i class="el-icon-s-platform"></i>
            </el-menu-item>
            <el-menu-item index="NetTopology">
              <i class="el-icon-printer"></i>
              <span slot="title">网络拓扑</span>
            </el-menu-item>
            <el-menu-item index="deviceInfo">
              <i class="el-icon-cloudy"></i>
              <span slot="title">云端服务</span>
            </el-menu-item>
            <el-menu-item index="HostMessage">
              <i class="el-icon-user-solid"></i>
              <span slot="title">用户信息</span>
            </el-menu-item>
          </el-menu>
          <!-- 折叠按钮 -->
          <div class="left_menu_button">
            <span
              :class="collapseBtnClass"
              style="cursor: pointer"
              @click="changMenu"
            ></span>
          </div>
        </el-col>
      </div>
      <div class="main">
        <router-view />
      </div>
    </div>
  </div>
</template>
<script>
import Api from "../api/api.js";
export default {
  name: "IndexVue",
  components: {},
  /* 注入依赖 */
  inject: ["reload"],
  data() {
    return {
      total_count: "",
      online_count: "",
      offline_count: "",
      interval: null,
      localSid: "577688740d9d258b92c61e6b1f5498ff",
      isOpenNetwork: false,
      isCollapse: false,
      /* 折叠图标按钮默认 */
      collapseBtnClass: "el-icon-s-fold",
      /* navigator.onLine  获取设备是否可以上网 */
      onLine: navigator.onLine,
    };
  },
  async created() {
    // this.$EventBus.$on("leftCurrentIndex", (rest) => {
    //   // console.log(rest);
    //   this.currentIndex = rest;
    // });
    // 网络由异常到正常时触发
    window.addEventListener("online", this.updateOnlineStatus);
    // 网络由异常到异常时触发
    window.addEventListener("offline", this.updateOfflineStatus);
    let res = await Api.get_device_online_count({
      params: { sid: this.localSid },
    });
    // 总设备数
    this.total_count = res.result.total_count;
    // 设备在线数
    this.online_count = res.result.online_count;
    // 设备离线数
    this.offline_count = res.result.offline_count;

    this.interval = setInterval(() => {
      Api.alive({ params: { sid: this.localSid } });
    }, 120000);
  },
  methods: {
    destroyed() {
      this.$EventBus.$off("leftCurrentIndex");
      clearInterval(this.interval);
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    topath(url) {
      this.$router.push({ path: url });
    },
    /* 加网 */
    addNetwork() {
      this.isOpenNetwork = !this.isOpenNetwork;
      if (this.isOpenNetwork) {
        Api.enabled_join_gateway({
          params: { sid: this.$store.state.sid, duration: 255 },
        });
      } else {
        Api.disabled_join_gateway({ params: { sid: this.$store.state.sid } });
      }
    },
    /* 页面刷新 */
    refresh() {
      window.location.reload();
    },
    /* 折叠按钮 */
    changMenu() {
      this.isCollapse = !this.isCollapse;
      //折叠时
      if (this.isCollapse) {
        this.collapseBtnClass = "el-icon-s-unfold";
      } else {
        this.collapseBtnClass = "el-icon-s-fold";
      }
    },
    //判断网络状态
    updateOnlineStatus() {
      this.onLine = true;
      console.log("网络以已连接");
    },
    updateOfflineStatus() {
      this.onLine = false;
      console.log("网络已断开111111");
    },
  },
};
</script>
<style lang="scss" scoped>
::-webkit-scrollbar {
  display: none;
}
.box {
  width: calc(100vw - 20px);
  height: calc(100vh - 80px);
  margin: 0;
  padding: 0;

  @media screen and (max-width: 600px) {
    body {
      font-size: 14px;
    }
  }

  /* 在屏幕宽度介于 601 像素和 1000 像素之间时应用的样式 */
  @media screen and (min-width: 601px) and (max-width: 1000px) {
    body {
      font-size: 16px;
    }
  }

  /* 在屏幕宽度大于 1000 像素时应用的样式 */
  @media screen and (min-width: 1001px) {
    body {
      font-size: 18px;
    }
  }

  .header {
    height: 80px;
    display: flex;
    .header-logo {
      height: 80px;
      width: auto;
      display: flex;
      background-color: #212131;
      .left-img {
        height: 80px;
        width: 64px;
        img {
          height: 33px;
          width: 33px;
          margin-left: 18px;
          margin-top: 21px;
        }
      }
      .right-img {
        height: 80px;
        width: 136px;
        img {
          width: 121px;
          height: 33px;
          margin-top: 21px;
        }
      }
    }
    .header-right {
      flex: 1;
      width: 100%;
      height: 80px;
      position: relative;
      .function {
        flex: 1;
        position: absolute;
        top: 0;
        right: 0;
        height: 1px;
        display: flex;
        line-height: 95px;
        .net-state-icon {
          // width: 240px;
          // height: 80px;
          // margin-right: 100px;
          img {
            width: 48px;
            height: 48px;
          }
        }

        // 组网图标旋转
        .network-icon {
          width: 48px;
          height: 80px;
          margin-left: 10px;
          img {
            width: 30px;
            height: 30px;
            margin-left: 10px;
          }
          @keyframes rotatefre {
            0% {
              transform: rotate(0);
            }
            100% {
              transform: rotate(360deg);
            }
          }

          &.rotate-animation {
            animation: rotatefre 2s linear infinite;
            /*Safari 和 Chrome:*/
            -webkit-animation: rotatefre 1s linear infinite;
          }
        }

        // 刷新移入旋转
        .refresh {
          width: 80px;
          height: 40px;
          margin-left: 10px;
          img {
            width: 48px;
            height: 48px;
            @keyframes rotatefre {
              0% {
                transform: rotate(0);
              }
              100% {
                transform: rotate(360deg);
              }
            }
          }
          .refresh-img {
            &.refresh-animation {
              animation: rotatefre 2s;
              /*Safari 和 Chrome:*/
              -webkit-animation: rotatefre 2s;
            }

            &:hover {
              animation: rotatefre 10s;
              /*Safari 和 Chrome:*/
              -webkit-animation: rotatefre 1.5s;
            }
          }
        }
      }
    }
  }

  .tbody {
    height: calc(100vh - 80px);
    display: flex;
    position: relative;

    .left_menu {
      background-color: #212131;
      position: relative;
      /* 导航栏对齐 */
      .el-menu {
        border-right: none;
      }
      /* 折叠样式 */
      .el-menu-vertical-demo:not(.el-menu--collapse) {
        width: 200px;
        i {
          position: relative;
          top: 0;
        }
        span {
          position: relative;
          top: 0;
          left: 16px;
        }
      }
      .left_menu_button {
        font-size: 30px;
        color: white;
        width: 100%;
        position: absolute;
        bottom: 5%;
        left: 15px;
      }
      .left_menu_state {
        padding-top: 5px;
        width: 200px;
        color: #fff;
        position: absolute;
        bottom: 2%;
        left: 0px;
        font-size: 15px;
        border-top: 1px solid slategray;
      }
    }
    .main {
      display: flex;
      width: 100%;
    }
  }
}

::v-deep.el-row .el-col-12 {
  // margin-left: 1px;
  width: 100.5%;
}

::v-deep .is-active {
  // text-align: center;
  // width: 95%;
  background: #2559c0 !important;
  border-radius: 10px !important;
}

::v-deep .el-menu-item {
  i {
    color: #fff;
  }

  &:hover {
    background: #2559c0 !important;
  }
}

::v-deep.el-submenu__title i {
  color: #fff;
}
</style>
